<!DOCTYPE hml>
<html>
<head>
<style type="text/css">
body { 
  background-color: #333; 
  margin: 20px;
  color: white;
}

svg {
  width: 600px;
  height: 600px;
}
</style>
</head>
<body>
	<p>Hover to change SVG z-order</p>
	<svg>
	  <rect x="0" y="0" width="200" height="200" fill="orchid" stroke="black"></rect>
	  <rect x="125" y="50" width="200" height="200" fill="rebeccapurple" stroke="black"></rect>
	  <rect x="50" y="125" width="200" height="200" fill="cornflowerblue" stroke="black"></rect>
	</svg>
</body>
</html>
<script type="text/javascript">
var svg = document.querySelector("svg");
var rects = document.querySelectorAll("rect");

var i = rects.length;
while(i--) {
  rects[i].addEventListener("mouseenter", function(e) {
    svg.appendChild(e.target);
  });
}
</script>


